<template>
  <div>
    <div class="comment-container">
      <div class="title">我的评论</div>
      <a-divider />
      <div v-for="(item,i) in commentList" :key="i" class="comment-list">
        <a-divider v-if="i !== 0" class="divider" />
        <div class="comment-item">
          <div>
            <img v-if="user.header" :src="user.header" class="avatar-img">
            <img v-else src="@/assets/def-avatar.jpg" class="avatar-img">
          </div>
          <div class="comment-main">
            <div class="comment-meta">
              <div class="comment-left">
                <div class="comment-title">
                  <span style="color: #4f4f4f">我</span>  <span style="color: #999999">参与了回复</span>
                </div>
                <router-link :to="'/blog/' + item.blog.blogId" class="blog-title" v-text="item.blog.blogTitle" />
              </div>
            </div>
            <div class="comment-body">
              <img src="@/assets/icons/quotation-up.png" class="quotation">
              <div class="comment-content" v-text="item.commentContent" />
              <img src="@/assets/icons/quotation-down.png" class="quotation">
            </div>
            <div class="comment-bottom">
              <span style="color: #999898;font-size: 12px;">评论于 </span>
              <span style="color: #999898;font-size: 12px;" v-text="item.createdTime" />
            </div>
          </div>
        </div>
      </div>
      <div v-if="page.totalPage > 1">
        <a-pagination :default-current="1" :total="page.totalCount" @change="pageChange" />
      </div>
    </div>
  </div>
</template>
<script>
import userApi from '@/api/user'
export default {
  data() {
    return {
      user: this.$store.getters.getUser,
      page: {
        currentPage: 1,
        pageSize: 10,
        totalCount: 0,
        totalPage: 0,
        list: []
      },
      commentList: []
    }
  },
  created() {
    this.getCommentByPage()
  },
  methods: {
    pageChange(pageNumber) {
      this.page.currentPage = pageNumber
      this.getCommentByPage()
    },
    getCommentByPage() {
      this.page.list = null
      userApi.getCommentByPage(this.page).then(resp => {
        this.page = resp.data
        this.commentList = resp.data.list
      })
    }
  }
}
</script>
<style scoped>
.comment-body {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.quotation {
  width: 10px;
  height: 10px;
  color: #595959;
}
.title {
  font-size: 20px;
  font-weight: bold;
  color: #3d3d3d;
}
.comment-item {
  display: flex;
  flex-direction: row;
  align-content: center;
  max-height: 80px;
}
.avatar-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #e5e5e5;
  margin-top: 5px !important;
  margin-right: 10px;
}
.comment-list {
  margin-bottom: 15px;
}
.comment-meta {
  width: 545px;
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: space-between;
}
.comment-left {
  display: flex;
  flex-direction: row;
}
.blog-title {
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-left: 8px;
color: #4d4d4d;
}
.blog-title:hover {
  color: #4d4d4d;
}
.comment-content {
  margin: 5px 3px 0px 3px;
  width: 500px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #595959;
}
.divider {
  margin: 8px 0 !important;
}
@font-face {
  font-family: 'iconfont';  /* project id 1743528 */
  src: url('//at.alicdn.com/t/font_1743528_w7nn51oqe8.eot');
  src: url('//at.alicdn.com/t/font_1743528_w7nn51oqe8.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_1743528_w7nn51oqe8.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_1743528_w7nn51oqe8.woff') format('woff'),
  url('//at.alicdn.com/t/font_1743528_w7nn51oqe8.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_1743528_w7nn51oqe8.svg#iconfont') format('svg');
}
.comment-bottom {
  margin-top: 5px;
}
</style>
